<!DOCTYPE html>
<html class="no-js" lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Shopping Cart - Shoplook Multipurpose eCommerce Bootstrap5 Html Template</title>
    <meta name="description" content="description">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Favicon -->
    <link rel="shortcut icon" th:href="@{/assets/images/favicon.png}"/>
    <!-- Plugins CSS -->
    <link rel="stylesheet" th:href="@{/assets/css/plugins.css}">
    <!-- Main Style CSS -->
    <link rel="stylesheet" th:href="@{/assets/css/style.css}">
    <link rel="stylesheet" th:href="@{/assets/css/responsive.css}">
</head>
<body class="my-cart-page">
<!--Pre-Loader-->
<div id="pre-loader" class="preloader">
    <div class="preloader-in h2">
        <span>S</span><span>H</span><span>O</span><span>P</span><span>L</span><span>O</span><span>O</span><span>K</span>
    </div>
</div>
<!--End Pre-Loader-->
<div class="page-wrapper">
    <!--引入片段-->
    <div th:replace="~{include_header::header}"></div>

    <div id="page-content">
        <!--Body Container-->
        <!--Page Header-->
        <div class="page-header" style="background-image: url(assets/images/page-header/page-banner1.jpg)">
            <div class="page-title"><h1>Cart Page Style1</h1></div>
            <!--Breadcrumbs-->
            <div class="breadcrumbs-wrapper">
                <div class="container">
                    <div class="breadcrumbs"><a href="/" title="Back to the home page"><i
                            class="an an-home icon-home"></i></a> <span aria-hidden="true"><i
                            class="an an-angle-right"></i></span> <span>Shopping Cart</span></div>
                </div>
            </div>
            <!--End Breadcrumbs-->
        </div>
        <!--End Page Header-->
        <div class="container">
            <div class="row">
                <!--Main Content-->
                <div class="col-12 col-sm-12 col-md-12 col-lg-12 main-col">
                    <div class="alert alert-success text-uppercase" role="alert">
                        <i class="icon an an-truck an-lg icon-large"></i> &nbsp;<strong>Congratulations!</strong> You've
                        got free shipping!
                    </div>
                    <form action="#" method="post" class="cart style2">
                        <div class="table-responsive">
                            <table id="cart-tbl">
                                <thead class="cart__row cart__header">
                                <tr>
                                    <th><input type="checkbox" id="check-all"></th>
                                    <th colspan="2" class="text-center">Product</th>
                                    <th class="text-center">Price</th>
                                    <th class="text-center">Qty</th>
                                    <th class="text-center">SubTotal</th>
                                    <th class="action">&nbsp;</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr th:each="ci:${cartItems}"
                                    class="cart__row border-bottom line1 cart-flex border-top">
                                    <td>
                                        <input type="checkbox" th:value="${ci.id}">
                                    </td>

                                    <td class="cart__image-wrapper cart-flex-item">
                                        <a href="#">
                                            <img class="blur-up lazyload cart__image"
                                                 th:src="@{${ci?.product?.mainPicUrl ?: '/assets/images/product-images/default.jpg'}}"
                                                 th:attr="data-src=@{${ci?.product?.mainPicUrl ?: '/assets/images/product-images/default.jpg'}}" alt=""></a>
                                    </td>
                                    <td class="cart__meta small--text-left cart-flex-item">
                                        <div class="list-view-item__title">
                                            <a th:href="@{/detail(id=${ci.productId})}" th:text="${ci?.product?.name}">Alpha
                                                ILCE-6000L 24.3 MP Mirrorless </a>
                                        </div>

                                        <div class="cart__meta-text">
                                            Color: Navy<br>Size: Small<br>
                                        </div>
                                    </td>
                                    <td class="cart__price-wrapper cart-flex-item text-center">
                                        <span class="money" th:text="|&yen;${ci?.product?.price ?: 0}|">$735.00</span>
                                    </td>
                                    <td class="cart__update-wrapper cart-flex-item text-center">
                                        <div class="cart__qty text-center">
                                            <div class="qtyField">
                                                <a class="qtyBtn minus" href="javascript:void(0);"><i
                                                        class="an an-minus"></i></a>
                                                <input class="cart__qty-input qty" type="text" name="qty"
                                                       id="Product-qty" th:value="${ci.quantity}" pattern="[0-9]*">
                                                <a class="qtyBtn plus" href="javascript:void(0);"><i
                                                        class="an an-plus"></i></a>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="small--hide cart-price text-center">
                                        <div><span class="money"
                                                   th:text="|&yen;${(ci?.product?.price ?: 0) * (ci.quantity ?: 1)}|">$735.00</span></div>
                                    </td>
                                    <td class="text-center small--hide"><a href="#" class="cart__remove"
                                                                           title="Remove tem"><i
                                            class="icon icon an an-times"></i></a></td>
                                </tr>


                                </tbody>
                                <tfoot>
                                <tr>
                                    <td colspan="3" class="text-left"><a href="https://template.annimexweb.com/"
                                                                         class="btn cart-continue">Continue shopping <i
                                            class="an an-lg an-arrow-right "></i></a></td>
                                    <td colspan="3" class="text-right">
                                        <button type="submit" name="clear" class="btn small--hide"><i
                                                class="an an-lg an-times"></i> Clear Shoping Cart
                                        </button>
                                        <button type="submit" name="update" class="btn cart-continue ms-2"><i
                                                class="an an-lg an-sync-alt"></i> Update Cart
                                        </button>
                                    </td>
                                </tr>
                                </tfoot>
                            </table>
                        </div>
                    </form>
                </div>
                <div class="container mt-4">
                    <div class="row">
                        <div class="col-12 col-sm-12 col-md-4 col-lg-4 mb-4 cart-col">
                            <div class="cart-col-in">
                                <h5>Discount Codes</h5>
                                <form action="#" method="post">
                                    <div class="form-group mb-3">
                                        <label for="address_zip">Enter your coupon code if you have one.</label>
                                        <input type="text" name="coupon">
                                    </div>
                                    <div class="actionRow">
                                        <div><input type="button" class="btn btn-secondary" value="Apply Coupon"></div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="col-12 col-sm-12 col-md-4 col-lg-4 mb-4 cart-col mb-2">
                            <div class="cart-col-in">
                                <h5>Estimate Shipping and Tax</h5>
                                <form action="#" method="post">
                                    <div class="form-group mb-2">
                                        <label for="address_country">Country</label>
                                        <select id="address_country" name="address[country]"
                                                data-default="United States">
                                            <option value="Belgium" data-provinces="[]">Belgium</option>
                                            <option value="---" data-provinces="[]">---</option>
                                            <option value="Afghanistan" data-provinces="[]">Afghanistan</option>
                                            <option value="Aland Islands" data-provinces="[]">Åland Islands</option>
                                            <option value="Albania" data-provinces="[]">Albania</option>
                                            <option value="Algeria" data-provinces="[]">Algeria</option>
                                            <option value="Andorra" data-provinces="[]">Andorra</option>
                                            <option value="Angola" data-provinces="[]">Angola</option>
                                            <option value="Anguilla" data-provinces="[]">Anguilla</option>
                                            <option value="Antigua And Barbuda" data-provinces="[]">Antigua &amp;
                                                Barbuda
                                            </option>
                                            <option value="Armenia" data-provinces="[]">Armenia</option>
                                            <option value="Aruba" data-provinces="[]">Aruba</option>
                                            <option value="Austria" data-provinces="[]">Austria</option>
                                            <option value="Azerbaijan" data-provinces="[]">Azerbaijan</option>
                                            <option value="Bahamas" data-provinces="[]">Bahamas</option>
                                            <option value="Bahrain" data-provinces="[]">Bahrain</option>
                                            <option value="Bangladesh" data-provinces="[]">Bangladesh</option>
                                            <option value="Barbados" data-provinces="[]">Barbados</option>
                                            <option value="Belarus" data-provinces="[]">Belarus</option>
                                            <option value="Belgium" data-provinces="[]">Belgium</option>
                                            <option value="Belize" data-provinces="[]">Belize</option>
                                            <option value="Benin" data-provinces="[]">Benin</option>
                                            <option value="Bermuda" data-provinces="[]">Bermuda</option>
                                            <option value="Bhutan" data-provinces="[]">Bhutan</option>
                                            <option value="Bolivia" data-provinces="[]">Bolivia</option>
                                            <option value="Bosnia And Herzegovina" data-provinces="[]">Bosnia &amp;
                                                Herzegovina
                                            </option>
                                            <option value="Botswana" data-provinces="[]">Botswana</option>
                                            <option value="Bouvet Island" data-provinces="[]">Bouvet Island</option>
                                            <option value="British Indian Ocean Territory" data-provinces="[]">British
                                                Indian Ocean Territory
                                            </option>
                                            <option value="Virgin Islands, British" data-provinces="[]">British Virgin
                                                Islands
                                            </option>
                                            <option value="Brunei" data-provinces="[]">Brunei</option>
                                            <option value="Bulgaria" data-provinces="[]">Bulgaria</option>
                                            <option value="Burkina Faso" data-provinces="[]">Burkina Faso</option>
                                            <option value="Burundi" data-provinces="[]">Burundi</option>
                                            <option value="Cambodia" data-provinces="[]">Cambodia</option>
                                            <option value="Republic of Cameroon" data-provinces="[]">Cameroon</option>
                                            <option value="Cape Verde" data-provinces="[]">Cape Verde</option>
                                            <option value="Bonaire, Sint Eustatius and Saba" data-provinces="[]">
                                                Caribbean Netherlands
                                            </option>
                                            <option value="Cayman Islands" data-provinces="[]">Cayman Islands</option>
                                            <option value="Central African Republic" data-provinces="[]">Central African
                                                Republic
                                            </option>
                                            <option value="Chad" data-provinces="[]">Chad</option>
                                            <option value="Chile" data-provinces="[]">Chile</option>
                                            <option value="Comoros" data-provinces="[]">Comoros</option>
                                            <option value="Congo" data-provinces="[]">Congo - Brazzaville</option>
                                            <option value="Congo, The Democratic Republic Of The" data-provinces="[]">
                                                Congo - Kinshasa
                                            </option>
                                            <option value="Cook Islands" data-provinces="[]">Cook Islands</option>
                                            <option value="Costa Rica" data-provinces="[]">Costa Rica</option>
                                            <option value="Croatia" data-provinces="[]">Croatia</option>
                                            <option value="Cuba" data-provinces="[]">Cuba</option>
                                            <option value="Curaçao" data-provinces="[]">Curaçao</option>
                                            <option value="Cyprus" data-provinces="[]">Cyprus</option>
                                            <option value="Czech Republic" data-provinces="[]">Czech Republic</option>
                                            <option value="Côte d'Ivoire" data-provinces="[]">Côte d'Ivoire</option>
                                            <option value="Denmark" data-provinces="[]">Denmark</option>
                                            <option value="Djibouti" data-provinces="[]">Djibouti</option>
                                            <option value="Dominica" data-provinces="[]">Dominica</option>
                                            <option value="Dominican Republic" data-provinces="[]">Dominican Republic
                                            </option>
                                            <option value="Finland" data-provinces="[]">Finland</option>
                                            <option value="France" data-provinces="[]">France</option>
                                            <option value="French Guiana" data-provinces="[]">French Guiana</option>
                                            <option value="French Polynesia" data-provinces="[]">French Polynesia
                                            </option>
                                            <option value="French Southern Territories" data-provinces="[]">French
                                                Southern Territories
                                            </option>
                                            <option value="Gabon" data-provinces="[]">Gabon</option>
                                            <option value="Gambia" data-provinces="[]">Gambia</option>
                                            <option value="Georgia" data-provinces="[]">Georgia</option>
                                            <option value="Germany" data-provinces="[]">Germany</option>
                                            <option value="Ghana" data-provinces="[]">Ghana</option>
                                            <option value="Gibraltar" data-provinces="[]">Gibraltar</option>
                                            <option value="Greece" data-provinces="[]">Greece</option>
                                            <option value="Greenland" data-provinces="[]">Greenland</option>
                                            <option value="Jersey" data-provinces="[]">Jersey</option>
                                            <option value="Jordan" data-provinces="[]">Jordan</option>
                                            <option value="Kazakhstan" data-provinces="[]">Kazakhstan</option>
                                            <option value="Kenya" data-provinces="[]">Kenya</option>
                                            <option value="Kiribati" data-provinces="[]">Kiribati</option>
                                            <option value="Kosovo" data-provinces="[]">Kosovo</option>
                                            <option value="Kuwait" data-provinces="[]">Kuwait</option>
                                            <option value="Kyrgyzstan" data-provinces="[]">Kyrgyzstan</option>
                                            <option value="Lao People's Democratic Republic" data-provinces="[]">Laos
                                            </option>
                                            <option value="Latvia" data-provinces="[]">Latvia</option>
                                            <option value="Lebanon" data-provinces="[]">Lebanon</option>
                                            <option value="Lesotho" data-provinces="[]">Lesotho</option>
                                            <option value="Liberia" data-provinces="[]">Liberia</option>
                                            <option value="Libyan Arab Jamahiriya" data-provinces="[]">Libya</option>
                                            <option value="Liechtenstein" data-provinces="[]">Liechtenstein</option>
                                            <option value="Lithuania" data-provinces="[]">Lithuania</option>
                                            <option value="Luxembourg" data-provinces="[]">Luxembourg</option>
                                            <option value="Macao" data-provinces="[]">Macau SAR China</option>
                                            <option value="Macedonia, Republic Of" data-provinces="[]">Macedonia
                                            </option>
                                            <option value="Madagascar" data-provinces="[]">Madagascar</option>
                                            <option value="Malawi" data-provinces="[]">Malawi</option>
                                            <option value="Monaco" data-provinces="[]">Monaco</option>
                                            <option value="Mongolia" data-provinces="[]">Mongolia</option>
                                            <option value="Montenegro" data-provinces="[]">Montenegro</option>
                                            <option value="Montserrat" data-provinces="[]">Montserrat</option>
                                            <option value="Morocco" data-provinces="[]">Morocco</option>
                                            <option value="Mozambique" data-provinces="[]">Mozambique</option>
                                            <option value="Myanmar" data-provinces="[]">Myanmar (Burma)</option>
                                            <option value="Namibia" data-provinces="[]">Namibia</option>
                                            <option value="Nauru" data-provinces="[]">Nauru</option>
                                            <option value="Nepal" data-provinces="[]">Nepal</option>
                                            <option value="Netherlands" data-provinces="[]">Netherlands</option>
                                            <option value="Samoa" data-provinces="[]">Samoa</option>
                                            <option value="San Marino" data-provinces="[]">San Marino</option>
                                            <option value="Sao Tome And Principe" data-provinces="[]">São Tomé &amp;
                                                Príncipe
                                            </option>
                                            <option value="Saudi Arabia" data-provinces="[]">Saudi Arabia</option>
                                            <option value="Senegal" data-provinces="[]">Senegal</option>
                                            <option value="Serbia" data-provinces="[]">Serbia</option>
                                            <option value="Seychelles" data-provinces="[]">Seychelles</option>
                                            <option value="Sierra Leone" data-provinces="[]">Sierra Leone</option>
                                            <option value="Singapore" data-provinces="[]">Singapore</option>
                                            <option value="Sint Maarten" data-provinces="[]">Sint Marteen</option>
                                            <option value="Slovakia" data-provinces="[]">Slovakia</option>
                                            <option value="Slovenia" data-provinces="[]">Slovenia</option>
                                            <option value="Solomon Islands" data-provinces="[]">Solomon Islands</option>
                                            <option value="Sri Lanka" data-provinces="[]">Sri Lanka</option>
                                            <option value="Saint Barthélemy" data-provinces="[]">St. Barthélemy</option>
                                            <option value="Saint Helena" data-provinces="[]">St. Helena</option>
                                            <option value="Saint Kitts And Nevis" data-provinces="[]">St. Kitts &amp;
                                                Nevis
                                            </option>
                                            <option value="Saint Lucia" data-provinces="[]">St. Lucia</option>
                                            <option value="Saint Martin" data-provinces="[]">St. Martin</option>
                                            <option value="Saint Pierre And Miquelon" data-provinces="[]">St. Pierre
                                                &amp; Miquelon
                                            </option>
                                            <option value="St. Vincent" data-provinces="[]">St. Vincent &amp;
                                                Grenadines
                                            </option>
                                            <option value="Sudan" data-provinces="[]">Sudan</option>
                                            <option value="Suriname" data-provinces="[]">Suriname</option>
                                            <option value="Svalbard And Jan Mayen" data-provinces="[]">Svalbard &amp;
                                                Jan Mayen
                                            </option>
                                            <option value="Swaziland" data-provinces="[]">Swaziland</option>
                                            <option value="Sweden" data-provinces="[]">Sweden</option>
                                            <option value="Switzerland" data-provinces="[]">Switzerland</option>
                                            <option value="Syria" data-provinces="[]">Syria</option>
                                            <option value="Taiwan" data-provinces="[]">Taiwan</option>
                                            <option value="Tajikistan" data-provinces="[]">Tajikistan</option>
                                            <option value="Timor Leste" data-provinces="[]">Timor-Leste</option>
                                            <option value="Togo" data-provinces="[]">Togo</option>
                                            <option value="Tokelau" data-provinces="[]">Tokelau</option>
                                            <option value="Tonga" data-provinces="[]">Tonga</option>
                                            <option value="Trinidad and Tobago" data-provinces="[]">Trinidad &amp;
                                                Tobago
                                            </option>
                                            <option value="Tunisia" data-provinces="[]">Tunisia</option>
                                            <option value="Turkey" data-provinces="[]">Turkey</option>
                                            <option value="Turkmenistan" data-provinces="[]">Turkmenistan</option>
                                            <option value="Turks and Caicos Islands" data-provinces="[]">Turks &amp;
                                                Caicos Islands
                                            </option>
                                            <option value="Tuvalu" data-provinces="[]">Tuvalu</option>
                                            <option value="United States Minor Outlying Islands" data-provinces="[]">
                                                U.S. Outlying Islands
                                            </option>
                                            <option value="Uganda" data-provinces="[]">Uganda</option>
                                            <option value="Ukraine" data-provinces="[]">Ukraine</option>
                                            <option value="United Arab Emirates">United Arab Emirates</option>
                                            <option value="United Kingdom" data-provinces="[]">United Kingdom</option>
                                            <option value="United States">United States</option>
                                            <option value="Uruguay" data-provinces="[]">Uruguay</option>
                                            <option value="Uzbekistan" data-provinces="[]">Uzbekistan</option>
                                            <option value="Vanuatu" data-provinces="[]">Vanuatu</option>
                                            <option value="Holy See (Vatican City State)" data-provinces="[]">Vatican
                                                City
                                            </option>
                                            <option value="Venezuela" data-provinces="[]">Venezuela</option>
                                            <option value="Vietnam" data-provinces="[]">Vietnam</option>
                                            <option value="Wallis And Futuna" data-provinces="[]">Wallis &amp; Futuna
                                            </option>
                                            <option value="Western Sahara" data-provinces="[]">Western Sahara</option>
                                            <option value="Yemen" data-provinces="[]">Yemen</option>
                                            <option value="Zambia" data-provinces="[]">Zambia</option>
                                            <option value="Zimbabwe" data-provinces="[]">Zimbabwe</option>
                                        </select>
                                    </div>

                                    <div class="form-group mb-2">
                                        <label>State</label>
                                        <select id="address_province" name="address[province]" data-default="">
                                            <option value="Alabama">Alabama</option>
                                            <option value="Alaska">Alaska</option>
                                            <option value="American Samoa">American Samoa</option>
                                            <option value="Arizona">Arizona</option>
                                            <option value="Arkansas">Arkansas</option>
                                            <option value="California">California</option>
                                            <option value="Colorado">Colorado</option>
                                            <option value="Connecticut">Connecticut</option>
                                            <option value="Delaware">Delaware</option>
                                            <option value="District of Columbia">District of Columbia</option>
                                            <option value="Federated States of Micronesia">Federated States of
                                                Micronesia
                                            </option>
                                            <option value="Florida">Florida</option>
                                            <option value="Georgia">Georgia</option>
                                            <option value="Guam">Guam</option>
                                            <option value="Hawaii">Hawaii</option>
                                            <option value="Idaho">Idaho</option>
                                            <option value="Illinois">Illinois</option>
                                            <option value="Indiana">Indiana</option>
                                            <option value="Iowa">Iowa</option>
                                            <option value="Kansas">Kansas</option>
                                            <option value="Kentucky">Kentucky</option>
                                            <option value="Louisiana">Louisiana</option>
                                            <option value="Maine">Maine</option>
                                            <option value="Marshall Islands">Marshall Islands</option>
                                            <option value="Maryland">Maryland</option>
                                            <option value="Massachusetts">Massachusetts</option>
                                            <option value="Michigan">Michigan</option>
                                            <option value="Minnesota">Minnesota</option>
                                            <option value="Mississippi">Mississippi</option>
                                            <option value="Missouri">Missouri</option>
                                            <option value="Montana">Montana</option>
                                            <option value="Nebraska">Nebraska</option>
                                            <option value="Nevada">Nevada</option>
                                            <option value="New Hampshire">New Hampshire</option>
                                            <option value="New Jersey">New Jersey</option>
                                            <option value="New Mexico">New Mexico</option>
                                            <option value="New York">New York</option>
                                            <option value="North Carolina">North Carolina</option>
                                            <option value="North Dakota">North Dakota</option>
                                            <option value="Northern Mariana Islands">Northern Mariana Islands</option>
                                            <option value="Ohio">Ohio</option>
                                            <option value="Oklahoma">Oklahoma</option>
                                            <option value="Oregon">Oregon</option>
                                            <option value="Palau">Palau</option>
                                            <option value="Pennsylvania">Pennsylvania</option>
                                            <option value="Puerto Rico">Puerto Rico</option>
                                            <option value="Rhode Island">Rhode Island</option>
                                            <option value="South Carolina">South Carolina</option>
                                            <option value="South Dakota">South Dakota</option>
                                            <option value="Tennessee">Tennessee</option>
                                            <option value="Texas">Texas</option>
                                            <option value="Utah">Utah</option>
                                            <option value="Vermont">Vermont</option>
                                            <option value="Virgin Islands">Virgin Islands</option>
                                            <option value="Virginia">Virginia</option>
                                            <option value="Washington">Washington</option>
                                            <option value="West Virginia">West Virginia</option>
                                            <option value="Wisconsin">Wisconsin</option>
                                            <option value="Wyoming">Wyoming</option>
                                            <option value="Armed Forces Americas">Armed Forces Americas</option>
                                            <option value="Armed Forces Europe">Armed Forces Europe</option>
                                            <option value="Armed Forces Pacific">Armed Forces Pacific</option>
                                        </select>
                                    </div>
                                    <div class="form-group mb-3">
                                        <label for="address_zip">Postal/Zip Code</label>
                                        <input type="text" id="address_zip" name="address[zip]">
                                    </div>

                                    <div class="actionRow">
                                        <div><input type="button" class="btn btn-secondary" value="Calculate shipping">
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>

                        <div class="col-12 col-sm-12 col-md-4 col-lg-4 cart__footer">
                            <div class="solid-border">
                                <div class="row border-bottom pb-2">
                                    <span class="col-6 col-sm-6 cart__subtotal-title">Subtotal</span>
                                    <span class="col-6 col-sm-6 text-right"><span class="money">$735.00</span></span>
                                </div>
                                <div class="row border-bottom pb-2 pt-2">
                                    <span class="col-6 col-sm-6 cart__subtotal-title">Tax</span>
                                    <span class="col-6 col-sm-6 text-right">$10.00</span>
                                </div>
                                <div class="row border-bottom pb-2 pt-2">
                                    <span class="col-6 col-sm-6 cart__subtotal-title">Shipping</span>
                                    <span class="col-6 col-sm-6 text-right">Free shipping</span>
                                </div>
                                <div class="row border-bottom pb-2 pt-2">
                                    <span class="col-6 col-sm-6 cart__subtotal-title"><strong>Grand Total</strong></span>
                                    <span class="col-6 col-sm-6 cart__subtotal-title cart__subtotal text-right"><span
                                            class="money">$1001.00</span></span>
                                </div>
                                <div class="cart__shipping">Shipping &amp; taxes calculated at checkout</div>
                                <p class="cart_tearm">
                                    <label>
                                        <input type="checkbox" name="tearm" class="checkbox me-1" value="tearm"
                                               required>
                                        I agree with the terms and conditions
                                    </label>
                                </p>
                                <input type="button" name="checkout" id="cartCheckout"
                                       class="btn btn--small-wide checkout" value="Proceed To Checkout">

                                <div class="paymnet-img"><img src="assets/images/payment-img.jpg" alt="Payment"></div>
                                <p><a th:href="@{/checkout}">Checkout with Multiple Addresses</a></p>
                            </div>

                        </div>
                    </div>
                </div>
                <!--End Main Content-->
            </div>
        </div><!--End Body Container-->

        <!--You may be interested in…-->
        <div class="section">
            <div class="container">
                <div class="section-header text-center">
                    <h2>You may be interested in…</h2>
                </div>
                <div class="grid-products">
                    <div class="row">
                        <div class="item col-lg-3 col-md-4 col-6">
                            <!-- start product image -->
                            <div class="product-image">
                                <!-- start product image -->
                                <a href="product-layout1.html" class="product-img">
                                    <!-- image -->
                                    <img class="primary blur-up lazyload"
                                         data-src="assets/images/product-images/elt-p-1.jpg"
                                         src="assets/images/product-images/elt-p-1.jpg" alt="" title="">
                                    <!-- End image -->
                                    <!-- Hover image -->
                                    <img class="hover blur-up lazyload"
                                         data-src="assets/images/product-images/elt-p-1-1.jpg"
                                         src="assets/images/product-images/elt-p-1-1.jpg" alt="" title="">
                                    <!-- End hover image -->
                                    <!-- product label -->
                                    <div class="product-labels"><span class="lbl on-sale">Sale</span></div>
                                    <!-- End product label -->
                                </a>
                                <!-- end product image -->

                                <!--Product Button-->
                                <div class="button-set style3">
                                    <ul>
                                        <li>
                                            <!--Quick View Button-->
                                            <a href="#quickview-popup" title="Quick View"
                                               class="btn-icon quick-view-popup quick-view" data-bs-toggle="modal"
                                               data-bs-target="#quickview_popup">
                                                <i class="icon an an-expand-arrows-alt"></i>
                                                <span class="tooltip-label">Quick View</span>
                                            </a>
                                            <!--End Quick View Button-->
                                        </li>
                                        <li>
                                            <!--Wishlist Button-->
                                            <div class="wishlist-btn">
                                                <a class="btn-icon wishlist add-to-wishlist" href="my-wishlist.html">
                                                    <i class="icon an an-heart-o"></i>
                                                    <span class="tooltip-label">Add To Wishlist</span>
                                                </a>
                                            </div>
                                            <!--End Wishlist Button-->
                                        </li>
                                        <li>
                                            <!--Compare Button-->
                                            <div class="compare-btn">
                                                <a class="btn-icon compare add-to-compare" href="compare-style2.html"
                                                   title="Add to Compare">
                                                    <i class="icon an an-balance-scale"></i>
                                                    <span class="tooltip-label">Add to Compare</span>
                                                </a>
                                            </div>
                                            <!--End Compare Button-->
                                        </li>
                                    </ul>
                                </div>
                                <!--End Product Button-->
                            </div>
                            <!-- end product image -->
                            <!--start product details -->
                            <div class="product-details text-left">
                                <!--Brand Name-->
                                <div class="brand-name">Coolpix</div>
                                <!--End Brand Name-->
                                <!-- product name -->
                                <div class="product-name">
                                    <a href="product-layout1.html">Coolpix (A100) 20 MP Point & Shoot Camera</a>
                                </div>
                                <!-- End product name -->
                                <!-- product price -->
                                <div class="product-price">
                                    <span class="old-price">$499.00</span>
                                    <span class="price">$400.00</span>
                                </div>
                                <!-- End product price -->
                                <!--Cart Button-->
                                <a href="#pro-addtocart-popup" title="Add to Cart" class="btn-icon btn btn-addto-cart"
                                   data-bs-toggle="modal" data-bs-target="#pro-addtocart-popup">
                                    <i class="icon an an-shopping-cart"></i> <span>Add to Cart</span>
                                </a>
                                <!--end Cart Button-->
                            </div>
                            <!-- End product details -->
                        </div>
                        <div class="item col-lg-3 col-md-4 col-6">
                            <!-- start product image -->
                            <div class="product-image">
                                <!-- start product image -->
                                <a href="product-layout1.html" class="product-img">
                                    <!-- image -->
                                    <img class="primary blur-up lazyload"
                                         data-src="assets/images/product-images/elt-p-2.jpg"
                                         src="assets/images/product-images/elt-p-2.jpg" alt="" title="">
                                    <!-- End image -->
                                    <!-- Hover image -->
                                    <img class="hover blur-up lazyload"
                                         data-src="assets/images/product-images/elt-p-2-1.jpg"
                                         src="assets/images/product-images/elt-p-2-1.jpg" alt="" title="">
                                    <!-- End hover image -->
                                </a>
                                <!-- end product image -->

                                <!--Product Button-->
                                <div class="button-set style3">
                                    <ul>
                                        <li>
                                            <!--Quick View Button-->
                                            <a href="#quickview-popup" title="Quick View"
                                               class="btn-icon quick-view-popup quick-view" data-bs-toggle="modal"
                                               data-bs-target="#quickview_popup">
                                                <i class="icon an an-expand-arrows-alt"></i>
                                                <span class="tooltip-label">Quick View</span>
                                            </a>
                                            <!--End Quick View Button-->
                                        </li>
                                        <li>
                                            <!--Wishlist Button-->
                                            <div class="wishlist-btn">
                                                <a class="btn-icon wishlist add-to-wishlist" href="my-wishlist.html">
                                                    <i class="icon an an-heart-o"></i>
                                                    <span class="tooltip-label">Add To Wishlist</span>
                                                </a>
                                            </div>
                                            <!--End Wishlist Button-->
                                        </li>
                                        <li>
                                            <!--Compare Button-->
                                            <div class="compare-btn">
                                                <a class="btn-icon compare add-to-compare" href="compare-style2.html"
                                                   title="Add to Compare">
                                                    <i class="icon an an-balance-scale"></i>
                                                    <span class="tooltip-label">Add to Compare</span>
                                                </a>
                                            </div>
                                            <!--End Compare Button-->
                                        </li>
                                    </ul>
                                </div>
                                <!--End Product Button-->
                            </div>
                            <!-- end product image -->
                            <!--start product details -->
                            <div class="product-details text-left">
                                <!--Brand Name-->
                                <div class="brand-name">Nikon</div>
                                <!--End Brand Name-->
                                <!-- product name -->
                                <div class="product-name">
                                    <a href="product-layout1.html">Fully Automatic Washing Machine</a>
                                </div>
                                <!-- End product name -->
                                <!-- product price -->
                                <div class="product-price">
                                    <span class="price">$600.00</span>
                                </div>
                                <!-- End product price -->
                                <!--Cart Button-->
                                <a href="#pro-addtocart-popup" title="Add to Cart" class="btn-icon btn btn-addto-cart"
                                   data-bs-toggle="modal" data-bs-target="#pro-addtocart-popup">
                                    <i class="icon an an-shopping-cart"></i> <span>Add to Cart</span>
                                </a>
                                <!--end Cart Button-->
                            </div>
                            <!-- End product details -->
                        </div>
                        <div class="item col-lg-3 col-md-4 col-6">
                            <!-- start product image -->
                            <div class="product-image">
                                <!-- start product image -->
                                <a href="product-layout1.html" class="product-img">
                                    <!-- image -->
                                    <img class="primary blur-up lazyload"
                                         data-src="assets/images/product-images/elt-p-6.jpg"
                                         src="assets/images/product-images/elt-p-6.jpg" alt="" title="">
                                    <!-- End image -->
                                    <!-- Hover image -->
                                    <img class="hover blur-up lazyload"
                                         data-src="assets/images/product-images/elt-p-6-1.jpg"
                                         src="assets/images/product-images/elt-p-6-1.jpg" alt="" title="">
                                    <!-- End hover image -->
                                </a>
                                <!-- end product image -->
                                <!--Product label-->
                                <div class="product-labels"><span class="lbl pr-label2">Hot</span></div>
                                <!--Product label-->
                                <!--Product Button-->
                                <div class="button-set style3">
                                    <ul>
                                        <li>
                                            <!--Quick View Button-->
                                            <a href="#quickview-popup" title="Quick View"
                                               class="btn-icon quick-view-popup quick-view" data-bs-toggle="modal"
                                               data-bs-target="#quickview_popup">
                                                <i class="icon an an-expand-arrows-alt"></i>
                                                <span class="tooltip-label">Quick View</span>
                                            </a>
                                            <!--End Quick View Button-->
                                        </li>
                                        <li>
                                            <!--Wishlist Button-->
                                            <div class="wishlist-btn">
                                                <a class="btn-icon wishlist add-to-wishlist" href="my-wishlist.html">
                                                    <i class="icon an an-heart-o"></i>
                                                    <span class="tooltip-label">Add To Wishlist</span>
                                                </a>
                                            </div>
                                            <!--End Wishlist Button-->
                                        </li>
                                        <li>
                                            <!--Compare Button-->
                                            <div class="compare-btn">
                                                <a class="btn-icon compare add-to-compare" href="compare-style2.html"
                                                   title="Add to Compare">
                                                    <i class="icon an an-balance-scale"></i>
                                                    <span class="tooltip-label">Add to Compare</span>
                                                </a>
                                            </div>
                                            <!--End Compare Button-->
                                        </li>
                                    </ul>
                                </div>
                                <!--End Product Button-->
                            </div>
                            <!-- end product image -->
                            <!--start product details -->
                            <div class="product-details text-left">
                                <!--Brand Name-->
                                <div class="brand-name">LG</div>
                                <!--End Brand Name-->
                                <!-- product name -->
                                <div class="product-name">
                                    <a href="product-layout1.html">Alpha ILCE-6000L 24.3 MP Mirrorless</a>
                                </div>
                                <!-- End product name -->
                                <!-- product price -->
                                <div class="product-price">
                                    <span class="old-price">$349.00</span>
                                    <span class="price">$299.00</span>
                                </div>
                                <!-- End product price -->
                                <!--Cart Button-->
                                <a href="#pro-addtocart-popup" title="Add to Cart" class="btn-icon btn btn-addto-cart"
                                   data-bs-toggle="modal" data-bs-target="#pro-addtocart-popup">
                                    <i class="icon an an-shopping-cart"></i> <span>Add to Cart</span>
                                </a>
                                <!--end Cart Button-->
                            </div>
                            <!-- End product details -->
                        </div>
                        <div class="item col-lg-3 col-md-4 col-6">
                            <!-- start product image -->
                            <div class="product-image">
                                <!-- start product image -->
                                <a href="product-layout1.html" class="product-img">
                                    <!-- image -->
                                    <img class="primary blur-up lazyload"
                                         data-src="assets/images/product-images/elt-p-3.jpg"
                                         src="assets/images/product-images/elt-p-3.jpg" alt="" title="">
                                    <!-- End image -->
                                    <!-- Hover image -->
                                    <img class="hover blur-up lazyload"
                                         data-src="assets/images/product-images/elt-p-3-1.jpg"
                                         src="assets/images/product-images/elt-p-3-1.jpg" alt="" title="">
                                    <!-- End hover image -->
                                </a>
                                <!-- end product image -->
                                <!--Product label-->
                                <div class="product-labels"><span class="lbl pr-label1">New</span></div>
                                <!--Product label-->

                                <!--Product Button-->
                                <div class="button-set style3">
                                    <ul>
                                        <li>
                                            <!--Quick View Button-->
                                            <a href="#quickview-popup" title="Quick View"
                                               class="btn-icon quick-view-popup quick-view" data-bs-toggle="modal"
                                               data-bs-target="#quickview_popup">
                                                <i class="icon an an-expand-arrows-alt"></i>
                                                <span class="tooltip-label">Quick View</span>
                                            </a>
                                            <!--End Quick View Button-->
                                        </li>
                                        <li>
                                            <!--Wishlist Button-->
                                            <div class="wishlist-btn">
                                                <a class="btn-icon wishlist add-to-wishlist" href="my-wishlist.html">
                                                    <i class="icon an an-heart-o"></i>
                                                    <span class="tooltip-label">Add To Wishlist</span>
                                                </a>
                                            </div>
                                            <!--End Wishlist Button-->
                                        </li>
                                        <li>
                                            <!--Compare Button-->
                                            <div class="compare-btn">
                                                <a class="btn-icon compare add-to-compare" href="compare-style2.html"
                                                   title="Add to Compare">
                                                    <i class="icon an an-balance-scale"></i>
                                                    <span class="tooltip-label">Add to Compare</span>
                                                </a>
                                            </div>
                                            <!--End Compare Button-->
                                        </li>
                                    </ul>
                                </div>
                                <!--End Product Button-->
                            </div>
                            <!-- end product image -->
                            <!--start product details -->
                            <div class="product-details text-left">
                                <!--Brand Name-->
                                <div class="brand-name">PS4</div>
                                <!--End Brand Name-->
                                <!-- product name -->
                                <div class="product-name">
                                    <a href="product-layout1.html">PS4 500 GB Gaming Console</a>
                                </div>
                                <!-- End product name -->
                                <!-- product price -->
                                <div class="product-price">
                                    <span class="price">$310.00</span>
                                </div>
                                <!-- End product price -->
                                <!--Cart Button-->
                                <a href="#pro-addtocart-popup" title="Add to Cart" class="btn-icon btn btn-addto-cart"
                                   data-bs-toggle="modal" data-bs-target="#pro-addtocart-popup">
                                    <i class="icon an an-shopping-cart"></i> <span>Add to Cart</span>
                                </a>
                                <!--end Cart Button-->
                            </div>
                            <!-- End product details -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--End You may be interested in…-->

    </div><!--End Page Wrapper-->

    <!--Footer-->
    <div class="footer footer-1">
        <div class="footer-top clearfix">
            <div class="container">
                <div class="row">
                    <div class="col-12 col-sm-12 col-md-4 col-lg-3 about-us-col">
                        <img src="assets/images/logo-white.png" alt="ShopLook"/>
                        <p>55 Gallaxy Enque, 2568 steet,<br>23568 NY</p>
                        <p><b>Phone</b>: (440) 000 000 0000</p>
                        <p><b>Email</b>: <a href="mailto:sales@yousite.com">sales@yousite.com</a></p>
                        <ul class="list--inline social-icons">
                            <li><a href="#"><i class="icon an an-facebook-f"></i></a></li>
                            <li><a href="#"><i class="icon an an-twitter"></i></a></li>
                            <li><a href="#"><i class="icon an an-pinterest-p"></i></a></li>
                            <li><a href="#"><i class="icon an an-instagram"></i></a></li>
                            <li><a href="#"><i class="icon an an-youtube"></i></a></li>
                        </ul>
                    </div>
                    <div class="col-12 col-sm-12 col-md-4 col-lg-3 footer-links">
                        <h4 class="h4">Quick Shop</h4>
                        <ul>
                            <li><a href="#">Home Appliances</a></li>
                            <li><a href="#">Phones &amp; Tablet</a></li>
                            <li><a href="#">Audio &amp; Video</a></li>
                            <li><a href="#">Digital Cameras</a></li>
                            <li><a href="#">Accessories</a></li>
                            <li><a href="#">Computer &amp; Laptop</a></li>
                            <li><a href="#">Game &amp; Video</a></li>
                        </ul>
                    </div>
                    <div class="col-12 col-sm-12 col-md-4 col-lg-3 footer-links">
                        <h4 class="h4">Informations</h4>
                        <ul>
                            <li><a th:href="@{/login}">Login</a></li>
                            <li><a th:href="@{/my-account}">My Account</a></li>
                            <li><a th:href="@{/cart}">View Cart</a></li>
                            <li><a href="#">Privacy policy</a></li>
                            <li><a href="#">Shipping &amp; Returns</a></li>
                            <li><a href="#">Terms &amp; condition</a></li>
                            <li><a href="#">404 Page</a></li>
                        </ul>
                    </div>
                    <div class="col-12 col-sm-12 col-md-4 col-lg-3 footer-links">
                        <h4 class="h4">Customer Services</h4>
                        <ul>
                            <li><a href="blog-left-sidebar.html">Blog</a></li>
                            <li><a href="aboutus-style1.html">About us</a></li>
                            <li><a href="faqs-style1.html">FAQ's</a></li>
                            <li><a href="contact-style1.html">Contact Us</a></li>
                            <li><a href="#">Orders and Returns</a></li>
                            <li><a href="#">Track My Order</a></li>
                            <li><a href="#">Support Center</a></li>
                        </ul>
                    </div>
                    <div class="col-12 col-sm-12 col-md-4 col-lg-3 newsletter-col">
                        <div class="display-table">
                            <div class="display-table-cell footer-newsletter">
                                <form action="#" method="post">
                                    <label class="h4">Sign Up To Our Newsletter</label>
                                    <p>Enter your email to receive daily news and get 20% off coupon for all items.</p>
                                    <div class="input-group">
                                        <input type="email" class="input-group__field newsletter-input" name="EMAIL"
                                               value="" placeholder="Email Your address" required>
                                        <span class="input-group__btn">
                                                    <button type="submit" class="btn btn-secondary newsletter__submit"
                                                            name="commit" id="Subscribe"><span
                                                            class="newsletter__submit-text--large">Subscribe</span></button>
                                                </span>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-bottom clearfix">
            <div class="container">
                <ul class="payment-icons list--inline">
                    <li><i class="an an-cc-visa" aria-hidden="true"></i></li>
                    <li><i class="an an-cc-mastercard" aria-hidden="true"></i></li>
                    <li><i class="an an-cc-amex" aria-hidden="true"></i></li>
                    <li><i class="an an-cc-paypal" aria-hidden="true"></i></li>
                    <li><i class="an an-cc-discover" aria-hidden="true"></i></li>
                    <li><i class="an an-cc-stripe" aria-hidden="true"></i></li>
                    <li><i class="an an-cc-jcb" aria-hidden="true"></i></li>
                </ul>
                <div class="copytext">
                    &copy; 2022 ShopLook. All Rights By <a href="http://www.bootstrapMB.com">bootstrapMB</a>.
                </div>
            </div>
        </div>
    </div>
    <!--End Footer-->

    <!-- Quickview Modal -->
    <div class="modal fade" id="quickview_popup" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12 col-sm-6 col-md-6 col-lg-6">
                            <div id="slider">
                                <!-- model thumbnail -->
                                <div id="quickView" class="carousel slide">
                                    <div class="quickview-in">
                                        <!-- image slide carousel items -->
                                        <div class="carousel-inner">
                                            <!-- slide 1 -->
                                            <div class="item carousel-item active" data-bs-slide-number="0">
                                                <img class="blur-up lazyload"
                                                     data-src="assets/images/product-images/elt-p-15.jpg"
                                                     src="assets/images/product-images/elt-p-15.jpg" alt="product"
                                                     title="">
                                            </div>
                                            <!-- End slide 1 -->
                                            <!-- slide 2 -->
                                            <div class="item carousel-item" data-bs-slide-number="1">
                                                <img class="blur-up lazyload"
                                                     data-src="assets/images/product-images/elt-p-15-1.jpg"
                                                     src="assets/images/product-images/elt-p-15-1.jpg" alt="product"
                                                     title="">
                                            </div>
                                            <!-- End slide 2 -->
                                            <!-- slide 3 -->
                                            <div class="item carousel-item" data-bs-slide-number="2">
                                                <img class="blur-up lazyload"
                                                     data-src="assets/images/product-images/elt-p-9.jpg"
                                                     src="assets/images/product-images/elt-p-9.jpg" alt="product"
                                                     title="">
                                            </div>
                                            <!-- End slide 3 -->
                                            <!-- slide 4 -->
                                            <div class="item carousel-item" data-bs-slide-number="3">
                                                <img class="blur-up lazyload"
                                                     data-src="assets/images/product-images/elt-p-8.jpg"
                                                     src="assets/images/product-images/elt-p-8.jpg" alt="product"
                                                     title="">
                                            </div>
                                            <!-- End slide 4 -->
                                            <!-- slide 5 -->
                                            <div class="item carousel-item" data-bs-slide-number="4">
                                                <img class="blur-up lazyload"
                                                     data-src="assets/images/product-images/elt-p-14.jpg"
                                                     src="assets/images/product-images/elt-p-14.jpg" alt="product"
                                                     title="">
                                            </div>
                                            <!-- End slide 5 -->
                                            <!-- slide 6 -->
                                            <div class="item carousel-item" data-bs-slide-number="5">
                                                <img class="blur-up lazyload"
                                                     data-src="assets/images/product-images/elt-p-14-1.jpg"
                                                     src="assets/images/product-images/elt-p-14-1.jpg" alt="product"
                                                     title="">
                                            </div>
                                            <!-- End slide 6 -->
                                        </div>
                                        <!-- End image slide carousel items -->
                                        <!-- arrow button -->
                                        <div class="np-btns">
                                            <a class="carousel-control left" href="#quickView"
                                               data-bs-target="#quickView" data-bs-slide="prev"><i
                                                    class="an an-angle-left"></i></a>
                                            <a class="carousel-control right" href="#quickView"
                                               data-bs-target="#quickView" data-bs-slide="next"><i
                                                    class="an an-angle-right"></i></a>
                                        </div>
                                        <!-- End arrow button -->
                                    </div>
                                    <!-- model thumbnail image -->
                                    <div class="model-thumbnail-img">
                                        <!-- model thumbnail slide -->
                                        <ul class="carousel-indicators list-inline">
                                            <!-- slide 1 -->
                                            <li class="list-inline-item active">
                                                <a id="carousel-selector-0" class="selected" data-bs-slide-to="0"
                                                   data-bs-target="#quickView">
                                                    <img class="blur-up lazyload"
                                                         data-src="assets/images/product-images/elt-p-15.jpg"
                                                         src="assets/images/product-images/elt-p-15.jpg" alt="product"
                                                         title="">
                                                </a>
                                            </li>
                                            <!-- End slide 1 -->
                                            <!-- slide 2 -->
                                            <li class="list-inline-item">
                                                <a id="carousel-selector-1" data-bs-slide-to="1"
                                                   data-bs-target="#quickView">
                                                    <img class="blur-up lazyload"
                                                         data-src="assets/images/product-images/elt-p-15-1.jpg"
                                                         src="assets/images/product-images/elt-p-15-1.jpg" alt="product"
                                                         title="">
                                                </a>
                                            </li>
                                            <!-- End slide 2 -->
                                            <!-- slide 3 -->
                                            <li class="list-inline-item">
                                                <a id="carousel-selector-2" data-bs-slide-to="2"
                                                   data-bs-target="#quickView">
                                                    <img class="blur-up lazyload"
                                                         data-src="assets/images/product-images/elt-p-9.jpg"
                                                         src="assets/images/product-images/elt-p-9.jpg" alt="product"
                                                         title="">
                                                </a>
                                            </li>
                                            <!-- End slide 3 -->
                                            <!-- slide 4 -->
                                            <li class="list-inline-item">
                                                <a id="carousel-selector-3" data-bs-slide-to="3"
                                                   data-bs-target="#quickView">
                                                    <img class="blur-up lazyload"
                                                         data-src="assets/images/product-images/elt-p-8.jpg"
                                                         src="assets/images/product-images/elt-p-8.jpg" alt="product"
                                                         title="">
                                                </a>
                                            </li>
                                            <!-- End slide 4 -->
                                            <!-- slide 5 -->
                                            <li class="list-inline-item">
                                                <a id="carousel-selector-4" data-bs-slide-to="4"
                                                   data-bs-target="#quickView">
                                                    <img class="blur-up lazyload"
                                                         data-src="assets/images/product-images/elt-p-14.jpg"
                                                         src="assets/images/product-images/elt-p-14.jpg" alt="product"
                                                         title="">
                                                </a>
                                            </li>
                                            <!-- End slide 5 -->
                                            <!-- slide 6 -->
                                            <li class="list-inline-item">
                                                <a id="carousel-selector-5" data-bs-slide-to="5"
                                                   data-bs-target="#quickView">
                                                    <img class="blur-up lazyload"
                                                         data-src="assets/images/product-images/elt-p-14-1.jpg"
                                                         src="assets/images/product-images/elt-p-14-1.jpg" alt="product"
                                                         title="">
                                                </a>
                                            </li>
                                            <!-- End slide 6 -->
                                        </ul>
                                        <!-- End model thumbnail slide -->
                                    </div>
                                    <!-- End model thumbnail image -->
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-sm-6 col-md-6 col-lg-6">
                            <div class="product-brand"><a href="#">Charcoal</a></div>
                            <h2 class="product-title">Product Quick View Popup</h2>
                            <div class="product-review">
                                <div class="rating">
                                    <i class="an an-star"></i><i class="an an-star"></i><i class="an an-star"></i><i
                                        class="an an-star"></i><i class="an an-star"></i>
                                </div>
                                <div class="reviews"><a href="#">5 Reviews</a></div>
                            </div>
                            <div class="product-info">
                                <div class="product-stock"><span class="instock">In Stock</span> <span
                                        class="outstock hide">Unavailable</span></div>
                                <div class="product-sku">SKU: <span class="variant-sku">19115-rdxs</span></div>
                            </div>
                            <div class="pricebox">
                                <span class="price old-price">$900.00</span>
                                <span class="price">$800.00</span>
                            </div>
                            <div class="sort-description">Shoplook Multipurpose Bootstrap 5 Html Template that will give
                                you and your customers a smooth shopping experience which can be used for various kinds
                                of stores such as fashion..
                            </div>
                            <form method="post" action="#" id="product_form--option" class="product-form">
                                <div class="product-options">
                                    <div class="swatch clearfix swatch-0 option1">
                                        <div class="product-form__item">
                                            <label class="label">Color:<span class="required">*</span> <span
                                                    class="slVariant">Red</span></label>
                                            <div class="swatch-element color">
                                                <input class="swatchInput" id="swatch-black" type="radio"
                                                       name="option-0" value="Black">
                                                <label class="swatchLbl small black" for="swatch-black"
                                                       title="Black"></label>
                                            </div>
                                            <div class="swatch-element color">
                                                <input class="swatchInput" id="swatch-blue" type="radio" name="option-0"
                                                       value="blue">
                                                <label class="swatchLbl small blue" for="swatch-blue"
                                                       title="Blue"></label>
                                            </div>
                                            <div class="swatch-element color">
                                                <input class="swatchInput" id="swatch-red" type="radio" name="option-0"
                                                       value="Blue">
                                                <label class="swatchLbl small red" for="swatch-red" title="Red"></label>
                                            </div>
                                            <div class="swatch-element color">
                                                <input class="swatchInput" id="swatch-pink" type="radio" name="option-0"
                                                       value="Pink">
                                                <label class="swatchLbl color small pink" for="swatch-pink"
                                                       title="Pink"></label>
                                            </div>
                                            <div class="swatch-element color">
                                                <input class="swatchInput" id="swatch-orange" type="radio"
                                                       name="option-0" value="Orange">
                                                <label class="swatchLbl color small orange" for="swatch-orange"
                                                       title="Orange"></label>
                                            </div>
                                            <div class="swatch-element color">
                                                <input class="swatchInput" id="swatch-yellow" type="radio"
                                                       name="option-0" value="Yellow">
                                                <label class="swatchLbl color small yellow" for="swatch-yellow"
                                                       title="Yellow"></label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="swatch clearfix swatch-1 option2">
                                        <div class="product-form__item">
                                            <label class="label">Size:<span class="required">*</span> <span
                                                    class="slVariant">XS</span></label>
                                            <div class="swatch-element xs">
                                                <input class="swatchInput" id="swatch-1-xs" type="radio" name="option-1"
                                                       value="XS">
                                                <label class="swatchLbl medium" for="swatch-1-xs" title="XS">XS</label>
                                            </div>
                                            <div class="swatch-element s">
                                                <input class="swatchInput" id="swatch-1-s1" type="radio" name="option-1"
                                                       value="S">
                                                <label class="swatchLbl medium" for="swatch-1-s1" title="S">S</label>
                                            </div>
                                            <div class="swatch-element m">
                                                <input class="swatchInput" id="swatch-1-m" type="radio" name="option-1"
                                                       value="M">
                                                <label class="swatchLbl medium" for="swatch-1-m" title="M">M</label>
                                            </div>
                                            <div class="swatch-element l">
                                                <input class="swatchInput" id="swatch-1-l" type="radio" name="option-1"
                                                       value="L">
                                                <label class="swatchLbl medium" for="swatch-1-l" title="L">L</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="product-action clearfix">
                                        <div class="quantity">
                                            <div class="wrapQtyBtn">
                                                <div class="qtyField">
                                                    <a class="qtyBtn minus" href="javascript:void(0);"><i
                                                            class="an an-minus" aria-hidden="true"></i></a>
                                                    <input type="text" id="quantityp" name="quantity" value="1"
                                                           class="product-form__input qty">
                                                    <a class="qtyBtn plus" href="javascript:void(0);"><i
                                                            class="an an-plus" aria-hidden="true"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="add-to-cart">
                                            <button type="button" class="btn button-cart">
                                                <span>Add to cart</span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                            <div class="wishlist-btn">
                                <a class="wishlist add-to-wishlist" href="#" title="Add to Wishlist"><i
                                        class="icon an an-heart-o" aria-hidden="true"></i> <span>Add to Wishlist</span></a>
                                <a class="wishlist add-to-compare ms-2" href="#" title="Add to Wishlist"><i
                                        class="icon an an-balance-scale" aria-hidden="true"></i>
                                    <span>Add to Compare</span></a>
                            </div>
                            <div class="share-icon">
                                <span>Share:</span>
                                <ul class="list--inline social-icons">
                                    <li><a href="#"><i class="icon an an-facebook-f"></i></a></li>
                                    <li><a href="#"><i class="icon an an-twitter"></i></a></li>
                                    <li><a href="#"><i class="icon an an-pinterest-p"></i></a></li>
                                    <li><a href="#"><i class="icon an an-instagram"></i></a></li>
                                    <li><a href="#"><i class="icon an an-youtube"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--End Quickview Modal-->

    <!-- Start Addtocart Added Popup -->
    <div class="modal fade" id="pro-addtocart-popup" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12 col-sm-12 col-md-12 col-lg-12">
                            <div class="addtocart-inner text-center clearfix">
                                <h4 class="title">Added to your shopping cart successfully.</h4>
                                <div class="pro-img mb-2">
                                    <img class="img-fluid blur-up lazyload"
                                         src="assets/images/product-images/addtocart-popup-img.jpg"
                                         data-src="assets/images/product-images/addtocart-popup-img.jpg"
                                         alt="Added to your shopping cart successfully."
                                         title="Added to your shopping cart successfully."/>
                                </div>
                                <div class="pro-details">
                                    <p class="pro-name mb-1">Mobile Galaxy S6 Edge</p>
                                    <p class="sku mb-0">Color: Gray</p>
                                    <p class="mb-0 qty-total">1 X $113.88</p>
                                    <div class="addcart-total mt-3 mb-3">
                                        Total: <b class="price">$113.88</b>
                                    </div>
                                    <div class="button-action">
                                        <a href="checkout-style1.html" class="btn btn-primary view-cart mx-1">Go To
                                            Checkout</a>
                                        <a href="index.html" class="btn btn-secondary">Continue Shopping</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End Addtocart Added Popup -->

    <!--Scoll Top-->
    <span id="site-scroll"><i class="icon an an-arrow-up"></i></span>
    <!--End Scoll Top-->

    <!--MiniCart Drawer-->
    <div class="minicart-right-drawer modal right fade" id="minicart-drawer">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div id="cart-drawer" class="block block-cart">
                    <a href="javascript:void(0);" class="close-cart" data-bs-dismiss="modal" aria-label="Close"><i
                            class="an an-times"></i></a>
                    <h4>Your cart (3 Items)</h4>
                    <div class="minicart-content">
                        <ul class="clearfix">
                            <li class="item clearfix">
                                <a class="product-image" href="#">
                                    <img src="assets/images/product-images/cart-page-img1.jpg"
                                         data-src="assets/images/product-images/cart-page-img1.jpg" alt="" title="">
                                </a>
                                <div class="product-details">
                                    <a href="#" class="remove"><i class="an an-times" aria-hidden="true"></i></a>
                                    <a href="#" class="edit-i remove"><i class="icon an an-edit" aria-hidden="true"></i></a>
                                    <a class="product-title" href="cart-style1.html">Acer NX.MVMSI.035 Intel Core i3
                                        15.6 inches Laptop</a>
                                    <div class="variant-cart">Black / XL</div>
                                    <div class="wrapQtyBtn">
                                        <div class="qtyField">
                                            <a class="qtyBtn minus" href="javascript:void(0);"><i class="an an-minus"
                                                                                                  aria-hidden="true"></i></a>
                                            <input type="text" name="quantity" value="1" class="qty">
                                            <a class="qtyBtn plus" href="javascript:void(0);"><i class="an an-plus"
                                                                                                 aria-hidden="true"></i></a>
                                        </div>
                                    </div>
                                    <div class="priceRow">
                                        <div class="product-price">
                                            <span class="money">$59.00</span>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="item clearfix">
                                <a class="product-image" href="#">
                                    <img src="assets/images/product-images/cart-page-img2.jpg"
                                         data-src="assets/images/product-images/cart-page-img2.jpg" alt="" title="">
                                </a>
                                <div class="product-details">
                                    <a href="#" class="remove"><i class="an an-times" aria-hidden="true"></i></a>
                                    <a href="#" class="edit-i remove"><i class="icon an an-edit" aria-hidden="true"></i></a>
                                    <a class="product-title" href="cart-style1.html">Canon CSG-QX10 Full Shot Lens</a>
                                    <div class="variant-cart">Red / S</div>
                                    <div class="wrapQtyBtn">
                                        <div class="qtyField">
                                            <a class="qtyBtn minus" href="javascript:void(0);"><i class="an an-minus"
                                                                                                  aria-hidden="true"></i></a>
                                            <input type="text" name="quantity" value="1" class="qty">
                                            <a class="qtyBtn plus" href="javascript:void(0);"><i class="an an-plus"
                                                                                                 aria-hidden="true"></i></a>
                                        </div>
                                    </div>
                                    <div class="priceRow">
                                        <div class="product-price">
                                            <span class="money">$89.00</span>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="item clearfix">
                                <a class="product-image" href="#">
                                    <img src="assets/images/product-images/elt-p-18-1.jpg"
                                         data-src="assets/images/product-images/elt-p-18-1.jpg" alt="" title="">
                                </a>
                                <div class="product-details">
                                    <a href="#" class="remove"><i class="an an-times" aria-hidden="true"></i></a>
                                    <a href="#" class="edit-i remove"><i class="icon an an-edit" aria-hidden="true"></i></a>
                                    <a class="product-title" href="cart-style1.html">Fully Automatic Washing Machine</a>
                                    <div class="wrapQtyBtn">
                                        <div class="qtyField">
                                            <a class="qtyBtn minus" href="javascript:void(0);"><i class="an an-minus"
                                                                                                  aria-hidden="true"></i></a>
                                            <input type="text" name="quantity" value="1" class="qty">
                                            <a class="qtyBtn plus" href="javascript:void(0);"><i class="an an-plus"
                                                                                                 aria-hidden="true"></i></a>
                                        </div>
                                    </div>
                                    <div class="priceRow">
                                        <div class="product-price">
                                            <span class="money">$1189.00</span>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="minicart-bottom">
                        <div class="subtotal list">
                            <span>Shipping:</span>
                            <span class="product-price">$10.00</span>
                        </div>
                        <div class="subtotal list">
                            <span>Tax:</span>
                            <span class="product-price">$05.00</span>
                        </div>
                        <div class="subtotal">
                            <span>Total:</span>
                            <span class="product-price">$93.13</span>
                        </div>
                        <div class="row mt-3 mb-3">
                            <div class="col-12 col-sm-12 col-md-6 col-lg-6 pr-0">
                                <a href="checkout-style2.html" class="btn proceed-to-checkout">Go to Checkout</a>
                            </div>
                            <div class="col-12 col-sm-12 col-md-6 col-lg-6">
                                <a href="cart-style1.html" class="btn btn-secondary cart-btn">View Cart</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--End MiniCart Drawer-->

    <!-- Including Jquery -->
    <script th:src="@{/assets/js/vendor/jquery-3.3.1.min.js}"></script>
    <script th:src="@{/assets/js/vendor/js.cookie.js}"></script>
    <!--Including Javascript-->
    <script th:src="@{/assets/js/plugins.js}"></script>
    <script th:src="@{/assets/js/main.js}"></script>

    <script th:inline="javascript">
        //上下文路径
        let ctx = /*[[@{/}]]*/"";
        if (ctx.endsWith("/")) {
            ctx = ctx.substring(0, ctx.length - 1);
        }

        //创建订单
        $("#cartCheckout").click(function () {
            //获取购物车选中项
            let ids = [];
            $("#cart-tbl>tbody>tr>td:first-child>:checked").each(function () {
                ids.push($(this).val());
            });

            //创建订单
            let url = ctx + "/order/prepare_checkout";
            $.ajax({
                url,
                method: "post",
                traditional: true,
                data: {
                    ids
                },
                success(resp) {
                    console.log(resp);
                    if (resp.success) {
                        location.href = ctx + "/prepare_checkout?orderId=" + resp.data;//跳转结算页
                    } else {
                        layer.msg(resp.msg || "创建订单失败");
                    }
                }
            });
        });

        //购物车项加减及删除，同步到数据库
        $(".qtyBtn:is(.minus,.plus)").click(function () {
            let qty = $("#Product-qty").val();//数量
            //console.log(qty);
            let url = ctx + "/cart";
            let cartItemId = $(this).closest("tr").find("td:first-child>:checkbox").val();
            $.ajax({
                url,
                method: "put",
                data: {
                    id: cartItemId,
                    qty
                },
                success(resp) {
                    if (resp.success) {
                        layer.msg("商品数量修改成功");
                    }
                }
            });
        });
    </script>

</div>
</body>
</html>
